<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../img/asset-favico.ico">
    <title>编辑信息</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/page-health-orderInfo.css">
    <link rel="stylesheet" href="../js/elementui/index.css" />
    <link rel="stylesheet" href="../css/page-health-orderInfo.css" />
    <!-- 引入组件库 -->
    <script src="../plugins/jquery/dist/jquery.min.js"></script>
    <script src="../js/healthmobile.js"></script>
    <script src="../plugins/datapicker/datePicker.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/elementui/index.js"></script>
    <script>
<!--        setmeal的id-->
        var id = getUrlParam("id");
    </script>
</head>

<body data-spy="scroll" data-target="#myNavbar" data-offset="150">
    <div class="app" id="app">
        <!-- 页面头部 -->
        <div class="top-header">
            <span class="f-left" ><i class="icon-back" onclick="history.go(-1)"></i>返回</span>
            <span class="center">千锋健康</span>
            <span class="f-right"><i class="icon-more"></i></span>
        </div>
        <!-- 页面内容 -->
        <div class="contentBox">
            <div class="card">
                <div class="project-img">
                    <img src="../img/widget-detail.png" width="100%" height="100%" />
                </div>
                <div class="project-text">
                    <h4 class="tit">{{setmeal.name}}</h4>
                    <p class="subtit">{{setmeal.remark}}</p>
                    <p class="keywords">
                        <span>{{setmeal.sex == '0' ? '性别不限' : setmeal.sex == '1' ? '男':'女'}}</span>
                        <span>{{setmeal.age}}</span>
                    </p>
<!--                    <h4 class="tit">孕前检查套餐（女）-精英版</h4>-->
<!--                    <p class="subtit">该套餐共23项检查项</p>-->
<!--                    <p class="keywords"><span>女</span><span>20-70</span></p>-->
                </div>
                <div class="project-know">
                    <a href="health-orderNotice.html" class="link-page">
            <i class="icon-ask-circle"><span class="path1"></span><span class="path2"></span></i>
            <span class="word">预约须知</span>
            <span class="arrow"><i class="icon-rit-arrow"></i></span>
        </a>
                </div>
            </div>
            <div class="form-info">
                <div class="info-title">
                    <span class="name">体检人信息</span>
                </div>
                <form class="input-group info-form">
                    <div class="input-row">
                        <label>体检人</label>
                        <input v-model="orderInfo.name" type="text" class="input-clear" placeholder="请输入用户名">

<!--                        <input type="text" class="input-clear" placeholder="请输入用户名">-->
                    </div>
                    <div class="input-row single-radio">
                        <label class="radio-title">性别</label>
                        <div class="radio-list">
                            <div class="radio">
                                <input v-model="orderInfo.sex" id="item1" type="radio" name="sex" value="1" checked>
<!--                                <input id="item1" type="radio" name="sex" value="选项一" checked>-->
                                <label for="item1"></label>
                                <span>男</span>
                            </div>
                            <div class="radio">
                                <input v-model="orderInfo.sex" id="item2" type="radio" name="sex" value="2">
<!--                                <input id="item2" type="radio" name="sex" value="选项二">-->
                                <label for="item2"></label>
                                <span>女</span>
                            </div>
                        </div>
                    </div>

                    <div class="input-row">
                        <label>手机号</label>
                        <input v-model="orderInfo.phone" type="text" class="input-clear" placeholder="请输入手机号">
<!--                        <input type="text" class="input-clear" placeholder="请输入手机号">-->
                    </div>
                    <div class="input-row">
                        <label>身份证号</label>
                        <input v-model="orderInfo.idCard" type="text" class="input-clear" placeholder="请输入身份证号">
<!--                        <input type="text" class="input-clear" placeholder="请输入身份证号">-->
                    </div>
                    <div class="input-row">
                        <label>出生日期</label>
                        <i class="icon-date" class="birthday"></i>
                        <input  v-model="orderInfo.birthday" type="text" class="birthday"  readonly>
<!--                        <input type="text" class="input-clear" placeholder="请输入出生日期">-->
                    </div>
                    <div class="input-row single-radio">
                        <label class="radio-title">婚否</label>
                        <div class="radio-list">
                            <div class="radio">
                                <input v-model="orderInfo.maritalstatus" id="item3" type="radio" name="maritalstatus" value="选项一" checked>
<!--                                <input id="item3" type="radio" name="marry" value="选项一" checked>-->
                                <label for="item3"></label>
                                <span>已婚</span>
                            </div>
                            <div class="radio">
                                <input v-model="orderInfo.maritalstatus" id="item4" type="radio" name="maritalstatus" value="选项二" checked>
<!--                                <input id="item4" type="radio" name="marry" value="选项二">-->
                                <label for="item4"></label>
                                <span>未婚</span>
                            </div>
                        </div>
                    </div>
                    <div class="date">
                        <label>体检日期选择</label>
                        <i class="icon-date" class="picktime"></i>
                        <input v-model="orderInfo.orderDate" type="text" class="picktime"  readonly>

<!--                        <input type="text" class="picktime" value="03-27 15:00" readonly>-->
                    </div>
                </form>
                <div class="box-button">
                    <button @click="submitOrder()" type="button" class="btn order-btn">提交预约</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 页面 css js -->

    <!-- <link rel="stylesheet" href="./../../plugins/zepto/zepto.mtimer.css">
    <script src="./../../plugins/jquery/dist/jquery.min.js"></script>
    <script src="./../../plugins/zepto/zepto.js"></script>
    <script src="./../../plugins/zepto/zepto.mtimer.js"></script> -->

    <script src="../plugins/datapicker/datePicker.js"></script>
    //提交预约
    <script>
        var vue = new Vue({
            el:'#app',
            data:{
                setmeal:{},//套餐信息
                //预约信息
                orderInfo:{
                    // name: '',
                    setmealId:id,
                    // sex: '',
                    // phone: '',
                    // idCard: '',
                    // birthday: '',
                    // maritalstatus: '',
                    // orderDate: '',
                    // sex:'1'
                },
            },
            methods:{
                //提交预约
                submitOrder(){
                    //获得输入的手机号和身份证号
                    var phone = this.orderInfo.phone;
                    var idcard = this.orderInfo.idCard;
                    //调用js方法
                    if (!checkTelephone(phone)){
                        //手机号错误
                        this.$message.error('手机号不合法,请重新输入');
                        return false;
                    }else
                    if (!checkIdCard(idcard)){
                        //身份证号错误
                        this.$message.error('身份证号错误,请重新输入');
                        return false;
                    }

                    //打开cookie携带开关
                    axios.defaults.withCredentials = true;
                    axios({
                        url: "http://localhost:81/orderinfo1/add",
                        method: "post",
                        data:this.orderInfo,
                        headers: {
                            //Bearer token的规范是：Authorization名称的头，值为Bearer空格+具体的jwt串
                            "Authorization": "Bearer " + localStorage.getItem("token"),

                        }
                    }).then(resp => {
                        // 访问数据成功
                            //手机号和身份证号正确
                            if(resp.data.flag){
                                //预约成功，跳转到预约成功页面
                                window.location.href="health-orderSuccess.html?orderId="+resp.data.data;
                            }else{
                                //预约失败，提示预约失败信息
                                this.$message.error(resp.data.msg);
                            }
                    });
                },
            },
            mounted(){
            // 页面展示
                //打开cookie携带开关
                axios.defaults.withCredentials = true;
                axios({
                    url: "http://localhost:81/setmeal/findById?id=" + id,
                    method: "post",

                    headers: {
                        //Bearer token的规范是：Authorization名称的头，值为Bearer空格+具体的jwt串
                        "Authorization": "Bearer " + localStorage.getItem("token"),
                    }
                }).then(resp => {
                    //判断是否有刷新的token
                    let refreshToken = resp.headers.refresh_token;
                    if (refreshToken != null && refreshToken.length != 0) {
                        localStorage.setItem("token", refreshToken)
                    }
                    let res = resp.data;
                    if (res.code == 2000) {
                        //没有登录  -- 跳转到登录页面
                        location.href = "/pages/health-login.html"
                    } else if (res.code == 3000) {
                        //没有权限
                        alert(res.msg)
                    } else {
                        //访问数据成功
                        this.setmeal = resp.data.data;
                    }
                })
            }
        });
    </script>
    <script>
        var calendar1 = new datePicker();
        calendar1.init({
            'trigger': '.picktime',
            /*按钮选择器，用于触发弹出插件*/
            'type': 'date',
            /*模式：date日期；datetime日期时间；time时间；ym年月；*/
            'minDate': getSpecifiedDate(new Date(),1),
            // 'minDate': '1900-1-1',
            /*最小日期*/
            'maxDate': getSpecifiedDate(new Date(),30),
            // 'maxDate': '2100-12-31',
            /*最大日期*/
            'onSubmit': function() { /*确认时触发事件*/
                var theSelectData = calendar1.value;
            },
            'onClose': function() { /*取消时触发事件*/ }
        });
        var calendar2 = new datePicker();
        calendar2.init({
            'trigger': '.birthday',
            /*按钮选择器，用于触发弹出插件*/
            'type': 'date',
            /*模式：date日期；datetime日期时间；time时间；ym年月；*/
            // 'minDate': getSpecifiedDate(new Date(),1),
            'minDate': '1900-1-1',
            /*最小日期*/
            // 'maxDate': getSpecifiedDate(new Date(),30),
            'maxDate': '2100-12-31',
            /*最大日期*/
            'onSubmit': function() { /*确认时触发事件*/
                var theSelectData = calendar2.value;
            },
            'onClose': function() { /*取消时触发事件*/ }
        });
    </script>
</body>